<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org"
      xmlns:layout="http://www.ultraq.net.nz/thymeleaf/layout"
      layout:decorate="~{layout/base}">
<head>
    <title>注册 - 暖心助农选品平台</title>
    <style>
        .register-card {
            border: none;
            border-radius: 15px;
            box-shadow: 0 0 20px rgba(0,0,0,0.1);
        }
        
        .register-card .card-header {
            background-color: transparent;
            border-bottom: none;
            padding-bottom: 0;
        }
        
        .register-title {
            color: #2ecc71;
            font-weight: 600;
        }
        
        .form-control:focus {
            border-color: #2ecc71;
            box-shadow: 0 0 0 0.2rem rgba(46, 204, 113, 0.25);
        }
        
        .btn-register {
            background-color: #2ecc71;
            border-color: #2ecc71;
        }
        
        .btn-register:hover {
            background-color: #27ae60;
            border-color: #27ae60;
        }
        
        .form-text {
            font-size: 0.875rem;
            color: #666;
        }
    </style>
</head>
<body>
    <div layout:fragment="content">
        <div class="container py-5">
            <div class="row justify-content-center">
                <div class="col-md-8 col-lg-6">
                    <div class="card register-card">
                        <div class="card-header text-center py-4">
                            <h4 class="register-title mb-0">
                                <i class="fas fa-user-plus me-2"></i>用户注册
                            </h4>
                        </div>
                        <div class="card-body p-4">
                            <div th:if="${message}" class="alert alert-success" role="alert">
                                <i class="fas fa-check-circle me-2"></i>
                                <span th:text="${message}"></span>
                            </div>
                            <div th:if="${error}" class="alert alert-danger" role="alert">
                                <i class="fas fa-exclamation-circle me-2"></i>
                                <span th:text="${error}"></span>
                            </div>
                            
                            <form th:action="@{/register}" method="post" class="needs-validation" novalidate>
                                <div class="mb-3">
                                    <label for="username" class="form-label">用户名</label>
                                    <input type="text" class="form-control" id="username" name="username" required
                                           pattern="^[a-zA-Z0-9_]{4,16}$">
                                    <div class="form-text">
                                        用户名长度为4-16位，只能包含字母、数字和下划线
                                    </div>
                                    <div class="invalid-feedback">
                                        请输入有效的用户名
                                    </div>
                                </div>
                                
                                <div class="mb-3">
                                    <label for="password" class="form-label">密码</label>
                                    <input type="password" class="form-control" id="password" name="password" required
                                           pattern="^(?=.*[A-Za-z])(?=.*\d)[A-Za-z\d]{6,}$">
                                    <div class="form-text">
                                        密码至少6位，必须包含字母和数字
                                    </div>
                                    <div class="invalid-feedback">
                                        请输入有效的密码
                                    </div>
                                </div>
                                
                                <div class="mb-3">
                                    <label for="confirmPassword" class="form-label">确认密码</label>
                                    <input type="password" class="form-control" id="confirmPassword" required>
                                    <div class="invalid-feedback">
                                        两次输入的密码不一致
                                    </div>
                                </div>
                                
                                <div class="mb-3">
                                    <label for="realName" class="form-label">真实姓名</label>
                                    <input type="text" class="form-control" id="realName" name="realName" required>
                                    <div class="invalid-feedback">
                                        请输入真实姓名
                                    </div>
                                </div>
                                
                                <div class="mb-3">
                                    <label for="phone" class="form-label">手机号码</label>
                                    <input type="tel" class="form-control" id="phone" name="phone" required
                                           pattern="^1[3-9]\d{9}$">
                                    <div class="invalid-feedback">
                                        请输入有效的手机号码
                                    </div>
                                </div>
                                
                                <div class="mb-3">
                                    <label for="email" class="form-label">电子邮箱</label>
                                    <input type="email" class="form-control" id="email" name="email" required>
                                    <div class="invalid-feedback">
                                        请输入有效的电子邮箱
                                    </div>
                                </div>
                                
                                <div class="mb-3">
                                    <label for="address" class="form-label">详细地址</label>
                                    <textarea class="form-control" id="address" name="address" rows="2" required></textarea>
                                    <div class="invalid-feedback">
                                        请输入详细地址
                                    </div>
                                </div>
                                
                                <div class="mb-4">
                                    <label for="role" class="form-label">注册身份</label>
                                    <select class="form-select" id="role" name="role" required>
                                        <option value="">请选择身份</option>
                                        <option value="EMPLOYEE">职工</option>
                                        <option value="FARMER">农户</option>
                                    </select>
                                    <div class="form-text">
                                        请选择您的身份，注册后需要等待管理员审核
                                    </div>
                                    <div class="invalid-feedback">
                                        请选择注册身份
                                    </div>
                                </div>
                                
                                <div class="d-grid gap-2">
                                    <button type="submit" class="btn btn-primary btn-register btn-lg">
                                        <i class="fas fa-user-plus me-2"></i>立即注册
                                    </button>
                                    <a href="/login" class="btn btn-light btn-lg">
                                        <i class="fas fa-sign-in-alt me-2"></i>返回登录
                                    </a>
                                </div>
                            </form>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    
    <th:block layout:fragment="scripts">
        <script>
            // 表单验证
            (function () {
                'use strict'
                
                const forms = document.querySelectorAll('.needs-validation')
                const password = document.getElementById('password')
                const confirmPassword = document.getElementById('confirmPassword')
                
                // 密码确认验证
                confirmPassword.addEventListener('input', function (event) {
                    if (this.value !== password.value) {
                        this.setCustomValidity('两次输入的密码不一致')
                    } else {
                        this.setCustomValidity('')
                    }
                })
                
                // 表单验证
                Array.from(forms).forEach(form => {
                    form.addEventListener('submit', event => {
                        if (!form.checkValidity()) {
                            event.preventDefault()
                            event.stopPropagation()
                        }
                        
                        form.classList.add('was-validated')
                    }, false)
                })
            })()
        </script>
    </th:block>
</body>
</html> 